<template>
  <div class="progress-list">
    <div
      v-for="(item, index) in dataList"
      :key="item.time"
      class="progress-list-item"
    >
      <div
        class="progress-list-time"
        :class="{ active: expandedIndices.includes(index) }"
      >
        <div @click="toggle(index)">
          <i
            :class="[
              'el-icon',
              expandedIndices.includes(index)
                ? 'el-icon-arrow-down'
                : 'el-icon-arrow-right'
            ]"
            :style="{
              color: expandedIndices.includes(index)
                ? '#1890ff'
                : '#606266'
            }"
          ></i>
          <span class="time-text">{{
            item.createTime || item.updateTime
          }}</span>
        </div>
        <div>
          <span
            class="edit"
            @click="editProcess(item, index)"
            v-if="!isDetail"
          >
            编辑
          </span>
          <span
            class="delete"
            @click="deleteProcess(index)"
            v-if="!isDetail"
          >
            删除
          </span>
        </div>
      </div>

      <div
        v-if="expandedIndices.includes(index)"
        class="progress-list-detail"
      >
        <div><span>属性：</span>{{ item.property }}</div>
        <div><span>项目阶段：</span>{{ item.stage }}</div>
        <div class="info">
          <span>进展信息：</span>{{ item.newestProcess }}
        </div>
        <div>
          <span>是否存在困难：</span>{{ item.problemFlag }}
        </div>
        <div>
          <span>存在问题及原因：</span
          >{{ item.problemContent }}
        </div>
        <div>
          <span>工作建议及举措：</span
          >{{ item.solveAdvice }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataList: Array,
    isDetail: Boolean,
    stage: String
  },
  watch: {
    dataList: {
      handler(newList) {
        this.$forceUpdate()
      },
      deep: true
    }
  },
  data() {
    return {
      expandedIndices: [0]
    }
  },
  methods: {
    toggle(index) {
      const i = this.expandedIndices.indexOf(index)
      if (i > -1) {
        this.expandedIndices.splice(i, 1) // 关闭
      } else {
        this.expandedIndices.push(index) // 展开
      }
    },
    deleteProcess(index) {
      this.$confirm('确认删除该条进度信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delete', index)
      })
    },
    editProcess(item, index) {
      this.$emit('edit', item, index)
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-list {
  padding: 10px 10px 0 10px;
  color: #606266;
  height: calc(100% - 50px);
  overflow: auto;

  .progress-list-item {
    margin-bottom: 10px;
  }

  &-time {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;

    i {
      margin-right: 6px;
      font-size: 16px;
      transition: color 0.3s;
    }

    .time-text {
      transition: color 0.3s;
    }

    &.active .time-text {
      color: #1890ff;
    }

    .edit {
      color: #1890ff;
    }

    .delete {
      color: red;
    }
  }
  span {
    color: #1f1f1f;
  }

  .progress-list-detail {
    padding-left: 22px;
    div {
      margin-top: 5px;
    }

    .info {
      max-height: 300px;
      overflow-y: auto;
    }
  }
}
</style>
